import columnsData, { ColumnsItem } from './data'
import React, { useRef, useState } from 'react';
import { Modal, Descriptions, Button, Row, Col, message } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getListDiscountTx, getDiscountTx } from './service';
import TableTitle from '@/components/TableTitle';
import { history } from 'umi'

export default () => {
  // console.log(document.referrer);
  // 商户号保存
  const [txNo, setTxNo] = useState<string | undefined>(undefined)
  const [recode, setRecode] = useState()

  React.useEffect(() => {
    // 当点击某一个商户的折扣配置进入页面时
    // 获取custNo 并赋值给merNo
    console.log(history.location.state);

    if (history.location.state?.txNo) {
      setTxNo(history.location.state?.txNo)
    }
  }, [])

  // 控制详情弹框的显示与隐藏
  const [discountRecordModal, setDiscountRecordModal] = React.useState(false)
  // 储存当前查看数据
  const [discountRecord, setDiscountRecord] = React.useState<ColumnsItem | undefined>(undefined)
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData
  // 定义操作单元格
  const columnsRender = (text: any, record: ColumnsItem) => record.status !== '0' ? [
    <a key='check'
      onClick={() => handleDetails(record)}
    >
      查看
    </a>
  ] : null
  // 定义金额单元格
  const amount = (text: any) => {
    return [
      <p
        key='amount'
        style={{ textAlign: 'right', margin: 0 }}
      >
        {text}
      </p>
    ]
  }

  // 币种单元格
  const ccy = (text: any, record: ColumnsItem) => [
    <span
      key='ccy'>
      {record.ccy}
    </span>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'totalDisctAmt' ? item.render = amount : undefined
    item.dataIndex === 'disctAmt' ? item.render = amount : undefined
    item.valueType === 'option' ? item.render = columnsRender : undefined
    item.dataIndex === 'ccy1' ? item.render = ccy : undefined
    item.dataIndex === 'ccy2' ? item.render = ccy : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  /**
   * 查看按钮回调
   * @param serialNumber 流水号
   */
  const handleDetails = async (record: ColumnsItem) => {
    let params = { prodOrdNo: record.prodOrdNo, txNo: record.txNo, type: record.type }
    console.log(params);

    let res = await getDiscountTx(params)
    console.log(res);

    if (res) {
      setRecode(res.body)
      setDiscountRecordModal(true)

    } else {
      message.info('获取详情失败')
    }
  }

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='折扣回馈' />}
        columns={columns}
        actionRef={actionRef}
        request={async params => {
          if (txNo && !params.prodOrdNo) {
            params.prodOrdNo = txNo
          }
          console.log(params);

          let data = await getListDiscountTx({ ...params, pageNum: params.current })
          console.log(data);

          const result = {
            data: data.body.list,
            total: data.body.total,
          }
          return result;
        }}
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'DiscountRecordList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="seqNo"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <Modal
        title={
          <Row style={{ fontSize: 14 }}>
            <Col style={{ fontSize: 16 }} span={6}>折扣详情</Col>
            <Col span={6}>关联商品订单号 : {recode?.prodOrdNo}</Col>
            <Col span={6}>受益人 : {recode?.memNo}</Col>
            <Col span={6}>
              折扣交易状态 : {
                recode?.periodSts === '0' ? ' 在途' :
                  recode?.periodSts === '1' ? ' 发放' :
                    recode?.periodSts === '2' ? ' 失败' :
                      null
              }
            </Col>
          </Row>
        }
        width={1000}
        centered
        visible={discountRecordModal}
        footer={
          <Button
            type="primary"
            htmlType="submit"
            onClick={() => setDiscountRecordModal(false)}
          >
            确认
          </Button>}
        onCancel={() => setDiscountRecordModal(false)}
      >
        <Descriptions
          column={{ xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }}
        >
          <Descriptions.Item label="商户名">{recode?.custName}</Descriptions.Item>
          <Descriptions.Item label="折扣编码">{recode?.disctNo}</Descriptions.Item>
          <Descriptions.Item label="折扣发放时间">{recode?.shareTm}</Descriptions.Item>
          <Descriptions.Item label="商户资产账号">{recode?.metAccount}</Descriptions.Item>
          <Descriptions.Item label="折扣总金额">{recode?.totalDisctAmt}</Descriptions.Item>
          <Descriptions.Item label="总金额币种">{recode?.ccy}</Descriptions.Item>
          <Descriptions.Item label="在途金额">{recode?.shareAmt}</Descriptions.Item>
          <Descriptions.Item label="在途折扣币种">{recode?.ccy}</Descriptions.Item>
          <Descriptions.Item label="折算汇率">{recode?.excRate}</Descriptions.Item>
          <Descriptions.Item label="账期">{recode?.period}</Descriptions.Item>
          <Descriptions.Item label="交易流水">{recode?.txNo}</Descriptions.Item>
          <Descriptions.Item label="到账金额">{recode?.disctAmt}</Descriptions.Item>
          <Descriptions.Item label="到账时间">{recode?.periodDte}</Descriptions.Item>
          <Descriptions.Item label="受益人账号">{recode?.memAccount}</Descriptions.Item>
          <Descriptions.Item label="备注">{recode?.remark}</Descriptions.Item>
        </Descriptions>
      </Modal>
    </div>
  );
};